<template>
  <div class="interview">
    <NavBar title="面经分享" path="/Home/Find" class="top"></NavBar>
    <div class="search" @click="$router.push('/Home/search')">
      <div>
        <span class="iconfont">&#xe647;</span>
        <span class="text">请输入关键字</span>
      </div>
    </div>
    <!-- 面试技巧 -->
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="10"
      >
        <share
          :item="item"
          v-for="(item, index) in skillsArr"
          :key="index"
        ></share>
      </van-list>
    </div>
  </div>
</template>
<script>
import share from './share'
import { getshare } from '@/api/find.js'

export default {
  components: { share },
  data () {
    return {
      skillsArr: [],
      // false 为关闭加载状态,关闭加载状态不显示加载状态不进行数据更新
      // true  为开启加载状态,开启加载状态显示加载状态进行数据更新
      loading: false,
      finished: false,

      total: 0,
      start: -5,
      limit: 5
    }
  },
  methods: {
    // list 事件
    async onLoad () {
      // 刚开始进入页面 , 没有识别到页面滚动到底部,所以无法触发list组件中设置好的自动属性,也就是
      // 自动触发load事件和将loading设置成true(开启加载状态),这时发起异步操作(发起请求获取数据)
      // 和更新数据,数据更新完毕后, 将loading设置成false(关闭夹杂状态不进行数据更新)

      //  这里是向下滑动到底部一次发起一次请求获取数据

      // 每次请求的数据索引都累加上一次请求的数据量之后开始,让页面显示的数据不重复
      this.start += this.limit
      const res = await getshare({ start: this.start, limit: this.limit })
      //   console.log(res)
      this.skillsArr.push(...res.data.list)
      // 将后台服务器的总数据量保存, 后面判断数据源是否请求完毕时使用
      this.total = res.data.total

      // 在一次滑动到底部的时候延迟将loading状态修改为false,这样可以产生加载中请求数据的效果
      await setTimeout(() => {
        // 获取到请求一次的数据之后,将loading设置成false状态,关闭加载状态,这样下次滑动到底部的时候
        // 才能够重新识别,并修改loading的状态再次触发onload事件发起请求
        this.loading = false
      }, 2000)

      // 判断数据源是否全部更新完毕 ,将finished改为true触发finished-text="没有更多了"显示
      if (this.skillsArr.length >= this.total) {
        this.finished = true
      }
    }
  }
}
</script>
<style lang="less" scoped>
.interview {
  .top {
    /deep/.van-nav-bar__title {
      font-size: 17px;
    }
  }
  .search {
    // height: 900px;
    padding: 0 20px 20px;
    div {
      width: 100%;
      padding: 5px 0;
      color: #d1cdcc;
      background-color: #f7f4f5;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      .iconfont {
        font-size: 20px;
      }
      .text {
        font-size: 16px;
      }
    }
  }
}
</style>
